<template>
	<view class="wrap" :style="'background-image: url('+topBg+')'">
		<view class="main">
			<view class="search">
				<view class="b-input">
					<input class="s-input" :value="keyword" @input="onInput" @confirm="onSearch"
						placeholder="请输入关键字搜索" />
					<view class="s-submit iconfont icon-search" @click="onSearch"></view>
				</view>
<!--				<view class="eat-method">-->
<!--					<view class="b-way" v-for="(item, index) in deployList" :key="index"-->
<!--						:class="{'f-active': item.alias === eatMethod}" @click="onChooseDeploy(index)">{{item.name}}-->
<!--					</view>-->
<!--				</view>-->
			</view>
			<view class="swiper-section" v-if="slideList.length > 0">
				<swiper class="swiper-list" :indicator-dots="slideList.length > 1" autoplay circular>
					<swiper-item class="swiper-item" @click="redirect(item.redirect_type, item.redirect_data)"
						v-for="(item, index) in slideList" :key="index">
						<image :src="item.image_url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="selecter">
				<scroll-view scroll-y class="left-aside" :style="{ height: categoryScrollHeight + 'px' }">
					<block v-for="(item, index) in categoryList" :key="index">
						<view class="b-item" :class="{ active: index === categoryIndex }"
							@click="onCategorySelect(index)">
							<view class="s-name">{{ item.name }}</view>
							<view class="s-num" v-if="categoryGoodsCountMap[index] > 0">
								{{categoryGoodsCountMap[index]}}
							</view>
						</view>
					</block>
					<!-- 加载中 -->
					<load-more :loadingType="loadingType" loadingText=" "></load-more>
				</scroll-view>
				<view class="right-aside">
					<view class="goods-state">
						<text class="b-amount">
							<text>共有</text>
							<text class="s-num">{{ totalGoodsCount }}</text>
							<text>个套餐</text>
						</text>
						<view class="b-filter">
							<checkbox-group @change="onFilterSale">
								<checkbox value="sale" color="#DA5650" :checked="onSale" />
							</checkbox-group>
							<text>只看当前在售</text>
						</view>
					</view>
					<scroll-view class="group-list" scroll-y scroll-with-animation :upper-threshold="100"
						:lower-threshold="100" :scroll-top="scrollTop" :scroll-into-view="'group-' + groupScroll"
						@scroll="onScroll" :style="{ height: groupScrollHeight + 'px' }">
						<view class="group-item" v-for="(group, index) in groupList" :id="'group-' + index"
							:key="index">
							<view class="group-title">{{ group.name }}</view>
							<view class="group-main">
								<food-item scene="order" v-for="item in group.items" :item="item" :key="item.id"
									@show="onShowFood" @addCart="onAddCart">
								</food-item>
							</view>
						</view>
						<view class="more-blank" v-if="showCart"></view>
					</scroll-view>
					<!-- 加载中 -->
					<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
				</view>
			</view>
			<!-- 菜品详情 -->
			<food-view ref="foodView" :item="foodData" @addCart="onAddCart" @close="onShowCart"></food-view>
			<!-- 快捷购物车 -->
			<quick-cart ref="quickCart"></quick-cart>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
	</view>
</template>

<script>
	import {
		getOrderData
	} from '@/service/api/page.js'
	import {
		getFoodList
	} from '@/service/api/food.js'
	import Util from '@/common/util'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				keyword: '',
				scrollTop: 0,
				deployList: [{
						icon: 'icon-meat',
						alias: 'meat',
						name: '堂食',
					},
					{
						icon: 'icon-pack',
						alias: 'pack',
						name: '外带'
					}
				],
				slideList: [],
				categoryIndex: 0,
				categoryList: [],
				categoryScrollHeight: 100,
				categorySelectTime: 0,
				onSale: false,
				totalGoodsCount: 0,
				groupScroll: 0,
				groupList: [],
				groupScrollHeight: 100,
				loadingType: -1,
				loadingText: ''
			};
		},
		computed: {
			topBg() {
				return this.$store.getters.globalConfig.style_order_bg || ''
			},
			eatMethod() {
				return this.$store.getters.eatMethod
			},
			cartList() {
				return this.$store.getters.cartList || []
			},
			categoryGoodsIdsMap() {
				let goodsIdsMap = {}
				for (let i = 0; i < this.groupList.length; i++) {
					let goodsIds = []
					for (let j = 0; j < this.groupList[i].items.length; j++) {
						goodsIds.push(this.groupList[i].items[j].id)
					}
					goodsIdsMap[this.groupList[i].id] = goodsIds
				}
				return goodsIdsMap
			},
			categoryGoodsCountMap() {
				let goodsCountMap = {}
				for (let i = 0; i < this.groupList.length; i++) {
					let goodsIds = this.categoryGoodsIdsMap[this.groupList[i].id]
					let goodsCount = 0
					for (let k = 0; k < this.cartList.length; k++) {
						if (goodsIds.indexOf(parseInt(this.cartList[k].goods_id)) !== -1) {
							goodsCount += parseInt(this.cartList[k].goods_count)
						}
					}
					goodsCountMap[i] = goodsCount
				}
				return goodsCountMap
			}
		},
		onLoad(options) {
			let params = options
			if (options.scene) {
				params = Util.urlDecode(decodeURIComponent(options.scene))
			}
			if (params.sid) {
				this.$store.commit('setShopId', params.sid)
				if (params.did) {
					this.$store.commit('setDeskId', params.did)
				} else {
					this.$store.commit('delDeskId')
				}
			}
			if (this.$store.getters.shopId) {
				this.loadOrderData()
				this.loadFoodList()
			} else {
				if (this.$store.getters.accessToken) {
					uni.reLaunch({
						url: '/pages/shop/index'
					})
				}
			}
		},
		onShareAppMessage(res) {
			console.log('onShareAppMessage', res)
			let shareData = this.$store.getters.shareData

			return {
				title: shareData.title,
				path: shareData.path,
				imageUrl: shareData.image
			}
		},
		methods: {
			loadOrderData() {
				getOrderData().then(([err, res]) => {
					console.log('getOrderData', err, res)
					if (!err) {
						this.slideList = res.slide_list
					}
					this.initScrollHeight()
				})
			},
			onInput(e) {
				this.keyword = e.detail.value;
			},
			onSearch() {
				this.loadFoodList()
			},
			onChooseDeploy(index) {
				console.log('onChooseDeploy', index)
				this.$store.commit('setEatMethod', this.deployList[index].alias)
			},
			// 选择类别
			onCategorySelect(index) {
				this.categoryIndex = index
				this.groupScroll = index // 方式一
				// this.scrollTop = this.groupList[index].scrollTop  // 方式二
				this.categorySelectTime = new Date() / 1
			},
			// 过滤在售
			onFilterSale(e) {
				console.log('onFilterSale', e)
				this.onSale = e.detail.value.length > 0
				this.loadFoodList()
			},
			// 监听右侧栏滚动
			onScroll(e) {
				console.log('onScroll', e)
				// 待优化
				let scrollTop = e.detail.scrollTop;
				let groupIndex = 0;
				this.groupList.forEach((item, index) => {
					if (item.scrollTop <= scrollTop) {
						groupIndex = index
					}
				});
				if (this.categoryIndex != groupIndex) {
					if (new Date() / 1 > this.categorySelectTime + 500) {
						console.log('scroll to', groupIndex, scrollTop)
						this.categoryIndex = groupIndex
					}
				}
			},
			loadFoodList() {
				console.log('loadFoodList')
				this.loadingType = 1
				this.loadingText = ''
				getFoodList(this.onSale ? 'sale' : '', this.keyword)
					.then(([err, res]) => {
						console.log('getFoodList', err, res);
						this.loadingType = -1;
						if (!err) {
							this.totalGoodsCount = res.total
							if (res.group_list.length > 0) {
								this.groupList = res.group_list
								let categoryList = []
								res.group_list.filter((item, index) => {
									categoryList.push({
										id: item.id,
										name: item.name
									})
								})
								this.categoryList = categoryList
								setTimeout(() => {
									this.calcGroupTop()
								}, 500)
							} else {
								this.groupList = []
								this.categoryList = []
								this.loadingType = 2
								this.loadingText = '暂无数据'
							}
						} else {
							this.loadingType = 3
						}
					});
			},
			// 计算分组偏移
			calcGroupTop() {
				let height = 0
				this.groupList.forEach((item, index) => {
					const groupView = uni.createSelectorQuery().in(this).select('#group-' + index)
					groupView.fields({
						size: true
					}, res => {
						console.log('Query fields', index, res)
						if (res) {
							item.scrollTop = height
							height += res.height
						}
					}).exec()
				})
			},
			initScrollHeight() {
				const systemInfo = uni.getSystemInfoSync()
				const windowHeight = systemInfo.windowHeight
				// #ifdef  H5
				const searchBarHeight = this.$logic.rpx2px(100 + 30)
				// #endif
				// #ifdef  MP-WEIXIN
				const searchBarHeight = this.$logic.rpx2px(100 + 180)
				// #endif
				let bannerHeight = 0
				if (this.slideList.length > 0) {
					bannerHeight = this.$logic.rpx2px(250)
				}
				const stateBarHeight = this.$logic.rpx2px(90)
				this.categoryScrollHeight = windowHeight - searchBarHeight - bannerHeight
				this.groupScrollHeight = this.categoryScrollHeight - stateBarHeight
			}
		}
	};
</script>

<style lang="scss">
	page,
	.wrap {
		height: 100%;
		background-color: #f8f8f8;
	}

	.wrap {
		// background-image: url(/static/imgs/top-bg.png);
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}

	.search {
		// #ifdef H5
		padding: 30upx 30upx 0 30upx;
		// #endif
		// #ifdef MP-WEIXIN
		padding: 180upx 30upx 0 30upx;
		// #endif

		width: 690upx;
		height: 100upx;
		display: flex;
		align-items: center;

		.b-input {
			padding: 0 20upx;
			flex: 1;
			height: 70upx;
			background: #fff;
			border-radius: 35upx;
			display: flex;
			align-items: center;

			.s-input {
				flex: 1;
				color: #333;
				font-size: 24upx;
			}

			.s-submit {
				margin-left: 20upx;
				color: #FF9626;
				font-size: 40upx;
			}
		}

		.eat-method {
			margin-left: 50upx;
			height: 60upx;
			line-height: 60upx;
			background: #FAFAFA;
			border-radius: 30upx;
			font-size: 24upx;
			color: #999;
			display: flex;
			align-items: center;

			.b-way {
				width: 100upx;
				height: 60upx;

				text-align: center;

				&.f-active {
					color: #fff;
					background: $pq-active-color;
					border-radius: 30upx;
				}
			}
		}
	}

	// 轮播图
	.swiper-section {
		margin: 20upx auto 20upx auto;
		width: 710upx;

		.swiper-list {
			height: 210upx;

			.swiper-item {
				width: 710upx;
				height: 210upx;

				image {
					width: 710upx;
					height: 210upx;
					border-radius: 10upx;
				}
			}
		}
	}

	.selecter {
		display: flex;
		height: 100%;
	}

	.left-aside {
		// padding-bottom: env(safe-area-inset-bottom) + 100upx;
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #FAF4ED;

		.b-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 90upx;
			font-size: 28upx;
			color: #333;
			position: relative;

			&.active {
				color: #FF9626;
				// background: #f8f8f8;
				background: linear-gradient(90deg, rgba(255, 147, 31, 0.5) 0%, rgba(255, 147, 31, 0) 100%);
				border-radius: 10rpx 0rpx 0rpx 10rpx;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 56upx;
					width: 8upx;
					background-color: #FF9626;
					border-radius: 0 4px 4px 0;
					opacity: 0.8;
				}
			}

			.s-name {}

			.s-num {
				position: absolute;
				top: 10upx;
				right: 10upx;
				width: 40upx;
				height: 40upx;
				border-radius: 20upx;
				line-height: 40upx;
				text-align: center;
				color: #fff;
				font-size: 24upx;
				background: #FF9626;
			}
		}
	}

	.right-aside {
		// padding-bottom: env(safe-area-inset-bottom) + 100upx;
		flex: 1;

		.goods-state {
			padding: 0 20upx;
			height: 90upx;
			background: #f1f2f1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.b-amount {
				color: #999;
				font-size: 28upx;

				.s-num {
					margin: 0 5upx;
				}
			}

			.b-filter {
				display: flex;
				align-items: center;
				color: #666666;
				font-size: 24upx;

				checkbox {
					transform: scale(0.7);
				}
			}
		}

		.type-list {
			padding: 20upx;
			display: flex;
			width: 550upx;
			height: 90upx;
			background: #fff;
			white-space: nowrap;

			// overflow-x: hidden;
			.b-item {
				display: inline-block;
				margin-right: 20upx;
				padding: 0 20upx;
				height: 50upx;
				line-height: 50upx;
				background: #f8f8f8;
				border-radius: 10upx;
				color: rgba(0, 0, 0, 0.5);
				font-size: 24upx;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					color: #0095ff;
					background: #e9f5ff;
				}
			}
		}

		.group-list {
			height: 100%;
			background: #f8f8f8;

			.group-item {}

			.group-title {
				padding: 20upx 50upx;
				color: #1A1A1A;
				font-size: 28upx;
				position: relative;

				&:before {
					content: '';
					position: absolute;
					left: 30upx;
					top: 50%;
					transform: translateY(-50%);
					height: 20upx;
					width: 4upx;
					background-color: #FF9626;
					border-radius: 4upx;
					opacity: 0.8;
				}
			}

			.group-main {

				// #ifdef H5
				.component {
					margin-bottom: 20upx;

					&:last-child {
						margin-bottom: 0;
					}
				}

				// #endif
				// #ifdef MP-WEIXIN
				course-item-mini {
					&:last-child .component {
						margin-bottom: 0;
					}

					.component {
						margin-bottom: 20upx;
					}
				}

				// #endif
			}
		}

		.food-item {
			padding: 30upx 30upx 0 30upx;
			// border-bottom: 1upx solid #eee;

			&:last-child {
				// border-bottom: none;
				padding-bottom: 30upx;
			}
		}
	}
</style>